<template>
	<view class="content" id="content">
		<!-- 朋友圈列表 -->
		<view class="content-circle">
			<view class="content-circle-box" v-for="it in circleData" :key="it.id">
				<view class="" v-if="it.wxType==0">
					<view class="title">
						请假申请通知
					</view>
					<view class="content" v-if="it.wxDetail.data.phrase4">
						<view class="">
							宝宝姓名:<text class="">{{it.wxDetail.data.name1.value}}</text>
						</view>
						<view class="" v-if='it.wxDetail.data.date2'>
							时间:<text>{{it.wxDetail.data.date2.value}}</text>
						</view>
						<view class="">
							状态:<text class="">{{it.wxDetail.data.phrase4.value}}</text>
						</view>
						
					</view>
					<view class="content" v-else>
						<view class="" >
							幼儿姓名:<text class="">{{it.wxDetail.data.name2.value}}</text>
						</view>
						<view class="">
							班级姓名:<text>{{it.wxDetail.data.name1.value}}</text>
						</view>
						<view class="">
							请假类型:<text>{{it.wxDetail.data.phrase3.value}}</text>
						</view>
						<view class="">
							起始日期:<text>{{it.wxDetail.data.date4.value}}</text>
						</view>
						<view class="">
							结束日期:<text>{{it.wxDetail.data.time11.value}}</text>
						</view>
					</view>
					<view class="detail" v-if='it.wxUrl' @click="goDetail(it.wxUrl)">
						<text>进入详情</text>
						<text>></text>
					</view>
				</view>
				<view class="" v-if="it.wxType==1">
					<view class="title">
						到校离校通知
					</view>
					<view class="content">
						<view class="">
							宝宝姓名:<text class="">{{it.wxDetail.data.name1.value}}</text>
						</view>
						<view class="" v-if='it.wxDetail.data.date2'>
							时间:<text>{{it.wxDetail.data.date2.value}}</text>
						</view>
						<view class="">
							状态:<text class="">{{it.wxDetail.data.phrase4.value}}</text>
						</view>

					</view>
					<view class="detail" v-if='it.wxUrl' @click="goDetail(it.wxUrl)">
						<text>进入详情</text>
						<text>></text>
					</view>
				</view>
				<view class="" v-if="it.wxType==2">
					<view class="title">
						故障报修通知
					</view>
					<view class="content">
						<view class="">
							报修人员:<text class="">{{it.wxDetail.data.thing3.value}}</text>
						</view>
						<view class="">
							联系方式:<text>{{it.wxDetail.data.phone_number4.value}}</text>
						</view>
						<view class="">
							报修时间:<text>{{it.wxDetail.data.time10.value}}</text>
						</view>
						
					</view>
					<view class="detail" v-if='it.wxUrl' @click="goDetail(it.wxUrl)">
						<text>进入详情</text>
						<text>></text>
					</view>
				</view>
			</view>
			<u-loadmore :status="status" />

		</view>




	</view>
</template>

<script>
	import {
		wxMessageList
	} from '@/api/message.js';

	export default {

		data() {
			return {
				circleData: [],
				params: {
					pageNum: 1,
					pageSize: 10,
				},
				pageMore: true,
				loading: false,
				status: 'loadmore',

			};
		},

		onShow() {


		},
		onReachBottom: function() {
			//避免多次触发
			// if (this.loadingType == 1 || this.loadingType == 3||this.loadingType == 2) {
			// 	return;
			// }
			this.loadMoreFunc();
		},
		onLoad(op) {
			this.getData(this.params)
		},
		onReady() {
			//兼容h5在pages.json中设置 autoBackButton：false无效  其实只是想修改下默认返回按钮的样式，发现不生效...
			// #ifdef H5
			// const icon = document.getElementsByClassName('uni-page-head-btn')[0];
			// icon.style.display = 'none';
			// #endif
		
			//设置input输入框距离键盘的高度 --也就是键盘的高度
			//设置view距离键盘和输入框的高度
			//h5暂不支持键盘的高度监听
		},
		//下拉刷新
		async onPullDownRefresh() {
			this.initParams()
			await this.getData(this.params);
			uni.stopPullDownRefresh();
		},
		methods: {
			goDetail(url) {
				console.log('进入', url)
				uni.navigateTo({
					url: url
				})
			},
			loadMoreFunc: function() {
				if (!this.pageMore) {
					// this.loadingType = 2;
					return;
				}
				this.getData(this.params)
			},
			initParams() {
				this.circleData = [];
				// this.loadingType = 4;
				this.params.pageNum = 1;
				this.pageMore = true;
			},

			pathRes(data) {
				uni.showLoading({
					title: '正在加载...',
					mask: true
				});
				if (data.code == 0) {
					uni.hideLoading();
					console.log('少时诵诗书所所', data.data.list)
					if (data.data.list.length == 0) {
						// this.loadingType = 3;
						this.status = 'nomore'
						return;
					}
					if (data.data.isLastPage) {
						this.pageMore = false;
						this.circleData = this.circleData.concat(data.data.list);
						// this.loadingType = 2;
						this.status = 'nomore'
					} else {
						if (data.data.isFirstPage) {
							this.circleData = data.data.list;
						} else {

							this.circleData = this.circleData.concat(data.data.list);
							console.log('不是第一页', this.circleData)
						}
						this.params.pageNum++;
						// this.loadingType = 0;
					}
					console.log('this.circleData', this.circleData)

					console.log('显示数据', this.circleData)
				} else {
					this.$api.showTip(res.data.msg);
				}
			},
			async getData(pa) {
				const {
					data
				} = await wxMessageList(pa)
				console.log('获取消息列表', data)
				if (data.data.list.length) {
					data.data.list.forEach(it => {
						it.wxDetail = JSON.parse(it.wxDetail)
					})
				}
				this.pathRes(data)

			},
			//自定义标题栏按钮
			onNavigationBarButtonTap({
				index
			}) {
				if (index == 0) {
					//发布朋友圈
					this.$u.route('pages/releaseFirendCircle/releaseFirendCircle');
				} else if (index == 1) {
					//返回按钮
					this.$u.route({
						type: 'back'
					});
				}
			},
			//跳转到名片
			linkToBusinessCard(userId) {

				// this.$u.route({
				// 	url: 'pages/businessCard/businessCard',
				// 	params: { userId }
				// });
			},
			
		}
	};
</script>

<style lang="scss" scoped>
	.content-circle-box {
		background-color: #fff;
		margin: 10px;
		border-radius: 10px;

		.title {
			height: 80rpx;
			line-height: 80rpx;
			border-bottom: 1px solid #f3f3f3;
			padding: 5px 20px;
			box-sizing: border-box;
			font-weight: 600;
		}

		.content {
			padding: 5px 20px;
			box-sizing: border-box;
			border-bottom: 1px solid #f3f3f3;

			view {
				margin-bottom: 15rpx;
				color: #a8a8a8
			}

			text {
				margin-left: 10px;
				color: #333
			}
		}

		.detail {
			display: flex;
			justify-content: space-between;
			height: 80rpx;
			line-height: 80rpx;
			padding: 5px 20px;
			box-sizing: border-box;
		}
	}
</style>